<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>web10</title>
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script>
            $(function(){
                 var t="<h5>h5</h5>";
                 $("button:first").click(function(){
                     $(this).text(t);
                 });       
                 $("button:eq(1)").click(function(){
                     $(this).html(t);
                 });
              //form 의 내용을 가져올때 .val()
              //form 의 내용을 수정할때 .val(text)
                 $("button:eq(1)").text($(":text").val());                     
              //attribute getter    .attr()
              //attribute setter    .attr()
                $("button:first").text(
                    $("input:text").attr("name"));
                    $("input:text").val("kim kim");
                    $("input:text").attr("type","radio");
                    
                    //주어.동사(목적어)
                    //selector.action(parameter..);
                    $("input").attr({
                        //속성:value
                        "type":"checkbox",
                        "name":"yourhobby",
                        "value":"baseball"                   
                        });
                    //insert   앞에, 뒤에     
                    $("body").append("<h3>append</h3>");
                    $("body").prepend("<h3>prepend</h3>");
                    //용도에 따라 위와 아레를 선택 사용 
                    $("<h3>append</h3>").appendTo("body");
                    $("<h3>prepend</h3>").prependTo("body");
                 $(":input").after("<hr>");
                 $(":input").after(function(a,b,c){
                     console.log("a",a,"b",b,"c",c,"this",this);
                     if(a==1) return"<hr>";
                 });
                 $("button").before(function(index){
                     return "button : ";
                 });
                // $("button").empty();   //쓰레기통 비우기 
                //empty();로만 사용 
                $("button").empty(function(a,b){
                    console.log("empty","a",a,"b",b);
                });
                // $("button").remove();  //쓰레기통 치워버리기 
                //filter,속성 name이 존재하는 것만 없애라 
                //$(":input").remove("[name]");
                
                
                $(":input").attr("type","text");
                bgcolor=    //rgb(r,g,b)
                $(":input:text").css("background-color");
                $(":input:text").val("배경색 "+bgcolor);
                mycolor="rgb(50,200,70)";
                $(":input:text").css("background-color",mycolor);
                
                var random = Math.random();  //0에서 1사이의 값을 가져온다.
                random*=255;   //0~255.00 사이의 값 
                random = Math.ceil(random);  //소수점 삭제 
                console.log("random",random);
                randomColor="rgb(50,100,"+random+")";
                
                $(":input").css("background-color",randomColor);
                console.log("클래스 이름 ",$('#btn1').attr("class"));
                console.log("아이디 이름 ",$('#btn1').attr("id"));
                console.log("스타일 내용 ",$('#btn1').attr("style"));
           
                $("div").click(function(){
                    //지정된 url의 데이터를 this에 출력해라 
                    $(this).load("ajax.html");
                    //서버 대 서버 통신에서만 ajax art이 성립합니다.
                    //서버내 통신도 가능 
                    //AJAX = Asynchronous JavaScript and XML.
                    
                    
                    
                });
           });
        </script>
              
  
<script>
function loadXMLDoc()
{
var xmlhttp;  //전역변수 선언 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari 최신 브라우져는 window.XMLHttpRequest 이 존재 
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  console.log("xmlhttp",xmlhttp);
  
  //상태가 변하면 펑션을 실행해라! 준비를 해두고 
  //1.(서버가) 요청을 받았다.
  //2.(서버가) 요청을 처리하고 있다.
  //3.(서버가) 요청을 모두 처리 했고 받을준비를 해라.
 
 
  //0: request not initialized 
  //1: server connection established
  //2: request received 
  //3: processing request 
  //4: request finished and response is ready
xmlhttp.onreadystatechange=function()
  {
     
      //xmlhttp.status==200   정상적으로 끝난 상태코드  
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","ajax.html",true);  //GET방식 으로 ajax.html요청 
//요청 보내기 
xmlhttp.send();
}
</script>



    </head>

    <body>
        <p onclick="loadXMLDoc()">javascript ajax 호출하기 </p>
        <div id="myDiv"> empty div</div>
        <input type="text" name="yourname " value="kim"
               style="background-color:yellow;
                       margin:4px;">
         <button id="btn1" class="btn1">버튼1</button>
         <button>버튼2</button>
 
 
    </body>
</html>
